<template>
  <div class="my-mooc-home">
    <!-- 未登录用户显示欢迎页面 -->
    <div v-if="!isLoggedIn" class="home-content">
      <!-- Hero区域 - 完全按照My MOOC设计 -->
      <section class="hero-section">
        <div class="hero-background">
          <!-- 真实学习场景背景图 -->
          <div class="hero-image"></div>
          <div class="hero-overlay"></div>
        </div>
        
        <div class="hero-content">
          <div class="container">
            <div class="hero-text">
              <h1 class="hero-title">免费学习编程，改变人生轨迹</h1>
              
              <!-- 搜索框 - 完全按照My MOOC样式 -->
              <div class="hero-search">
                <div class="search-container">
                  <div class="search-input-wrapper">
                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <circle cx="11" cy="11" r="8"></circle>
                      <path d="m21 21-4.35-4.35"></path>
                    </svg>
                    <input 
                      type="text" 
                      placeholder="Java" 
                      class="hero-search-input"
                      v-model="searchQuery"
                      @keyup.enter="handleSearch"
                    >
                  </div>
                  <button class="hero-search-btn" @click="handleSearch">搜索</button>
                </div>
                <p class="search-suggestion">
                  <span>或者让我们来</span>
                  <a href="#" @click.prevent="showAuthModal = true">推荐课程</a>
                </p>
              </div>

              <!-- CTA按钮 -->
              <div class="hero-cta">
                <button class="cta-btn" @click="showAuthModal = true">加入我们</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 主题分类区域 - 完全按照My MOOC设计 -->
      <section class="categories-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">编程领域</h2>
            <p class="section-subtitle">选择您感兴趣的编程方向，开始您的技术成长之路。</p>
          </div>
          
          <div class="categories-grid">
            <div class="category-item" @click="goToCategory('frontend')">
              <div class="category-icon frontend">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                  <line x1="8" y1="21" x2="16" y2="21"></line>
                  <line x1="12" y1="17" x2="12" y2="21"></line>
                </svg>
              </div>
              <span class="category-name">前端开发</span>
            </div>
            
            <div class="category-item" @click="goToCategory('backend')">
              <div class="category-icon backend">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
                  <line x1="7" y1="8" x2="17" y2="8"></line>
                  <line x1="7" y1="12" x2="17" y2="12"></line>
                  <line x1="7" y1="16" x2="10" y2="16"></line>
                </svg>
              </div>
              <span class="category-name">后端开发</span>
            </div>
            
            <div class="category-item" @click="goToCategory('mobile')">
              <div class="category-icon mobile">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                  <line x1="12" y1="18" x2="12.01" y2="18"></line>
                </svg>
              </div>
              <span class="category-name">移动开发</span>
            </div>
            
            <div class="category-item" @click="goToCategory('ai')">
              <div class="category-icon ai">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m15.5-6.5l-4.24 4.24m-6.36 0L1.66 5.66m16.68 12.68l-4.24-4.24m-6.36 0L1.66 18.34"></path>
                </svg>
              </div>
              <span class="category-name">人工智能</span>
            </div>
            
            <div class="category-item" @click="goToCategory('devops')">
              <div class="category-icon devops">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                </svg>
              </div>
              <span class="category-name">运维开发</span>
            </div>
            
            <div class="category-item" @click="goToCategory('game')">
              <div class="category-icon game">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="2" y="6" width="20" height="12" rx="2"></rect>
                  <circle cx="8" cy="12" r="2"></circle>
                  <path d="M16 10l2 2-2 2"></path>
                </svg>
              </div>
              <span class="category-name">游戏开发</span>
            </div>
            
            <div class="category-item" @click="goToCategory('blockchain')">
              <div class="category-icon blockchain">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                  <polyline points="3.27,6.96 12,12.01 20.73,6.96"></polyline>
                  <line x1="12" y1="22.08" x2="12" y2="12"></line>
                </svg>
              </div>
              <span class="category-name">区块链</span>
            </div>
            
            <div class="category-item" @click="goToCategory('security')">
              <div class="category-icon security">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                </svg>
              </div>
              <span class="category-name">网络安全</span>
            </div>
            
            <div class="category-item" @click="goToCategory('data')">
              <div class="category-icon data">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                  <polyline points="3.27,6.96 12,12.01 20.73,6.96"></polyline>
                  <line x1="12" y1="22.08" x2="12" y2="12"></line>
                </svg>
              </div>
              <span class="category-name">数据科学</span>
            </div>
            
            <div class="category-item" @click="goToCategory('programming')">
              <div class="category-icon programming">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <polyline points="16,18 22,12 16,6"></polyline>
                  <polyline points="8,6 2,12 8,18"></polyline>
                </svg>
              </div>
              <span class="category-name">算法与结构</span>
            </div>
            
            <div class="category-item" @click="goToCategory('database')">
              <div class="category-icon database">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
                  <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
                  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
                </svg>
              </div>
              <span class="category-name">数据库</span>
            </div>
          </div>
          
          <!-- 查看所有类别按钮 -->
          <div class="view-all-categories">
            <button class="view-all-btn" @click="$router.push('/courses')">
              查看所有编程方向
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="9,18 15,12 9,6"></polyline>
              </svg>
            </button>
          </div>
        </div>
      </section>

      <!-- 功能特色区域 -->
      <section class="features-section">
      <div class="container">
          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>
              </div>
              <h3 class="feature-title">零基础到就业的学习路径</h3>
              <p class="feature-description">
                精心设计的编程学习路径，从入门到精通，助您实现技术梦想。
              </p>
            </div>
            
            <div class="feature-card">
              <div class="feature-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                  <path d="M10 4v4h4V4"></path>
                </svg>
              </div>
              <h3 class="feature-title">100%免费的编程课程</h3>
              <p class="feature-description">
                致力于让每个人都能免费学习编程，打破教育壁垒。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 精选课程区域 -->
      <section class="featured-courses">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">精选编程课程</h2>
            <p class="section-subtitle">发现我们精心挑选的优质编程课程，每天更新，助力您的技术成长。</p>
          </div>
          
          <div class="courses-grid">
            <div class="course-card" @click="$router.push('/courses')">
              <div class="course-image java">
                <div class="course-badge">免费</div>
                <div class="course-provider">启航</div>
              </div>
              <div class="course-content">
                <h4 class="course-title">Java从零基础到企业开发</h4>
                <div class="course-rating">
                  <div class="stars">
                    <span v-for="i in 5" :key="i" class="star filled">★</span>
                  </div>
                  <span class="rating-text">5/5</span>
                </div>
                <div class="course-meta">
                  <span class="course-level">⭐ 零基础</span>
                </div>
              </div>
            </div>
            
            <div class="course-card" @click="$router.push('/courses')">
              <div class="course-image python">
                <div class="course-badge">免费</div>
                <div class="course-provider">启航</div>
              </div>
              <div class="course-content">
                <h4 class="course-title">Python数据分析与机器学习</h4>
                <div class="course-rating">
                  <div class="stars">
                    <span v-for="i in 5" :key="i" class="star filled">★</span>
                  </div>
                  <span class="rating-text">4.9/5</span>
                </div>
                <div class="course-meta">
                  <span class="course-level">⭐ 进阶</span>
                </div>
              </div>
            </div>
            
            <div class="course-card" @click="$router.push('/courses')">
              <div class="course-image frontend">
                <div class="course-badge">免费</div>
                <div class="course-provider">启航</div>
              </div>
              <div class="course-content">
                <h4 class="course-title">前端开发全栈训练营</h4>
                <div class="course-rating">
                  <div class="stars">
                    <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= 4 }">★</span>
                  </div>
                  <span class="rating-text">4.8/5</span>
                </div>
                <div class="course-meta">
                  <span class="course-level">⭐ 实战</span>
                </div>
              </div>
            </div>
            
            <div class="course-card" @click="$router.push('/courses')">
              <div class="course-image algorithms">
                <div class="course-badge">免费</div>
                <div class="course-provider">启航</div>
              </div>
              <div class="course-content">
                <h4 class="course-title">算法与数据结构精讲</h4>
                <div class="course-rating">
                  <div class="stars">
                    <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= 4 }">★</span>
                  </div>
                  <span class="rating-text">4.7/5</span>
                </div>
                <div class="course-meta">
                  <span class="course-level">⭐ 核心</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 已登录用户重定向到课程页面 -->
    <div v-else class="loading-section">
      <div class="loading-spinner">
        <svg class="spinner" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
        </svg>
      </div>
      <p class="loading-text">欢迎回来！正在跳转到课程页面...</p>
    </div>
    
    <!-- 登录注册选择弹窗 -->
    <el-dialog 
      v-model="showAuthModal" 
      title="开始学习之旅" 
      width="400px"
      align-center
      :show-close="false"
      class="auth-modal-dialog"
    >
      <div class="auth-modal">
        <div class="modal-content">
          <div class="modal-icon">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
              <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
            </svg>
          </div>
          <h3>选择合适的方式开始</h3>
          <p>加入启航学习平台，开启您的个人成长之旅</p>
          
          <div class="modal-buttons">
            <button class="modal-btn primary" @click="goToLogin">
              我已有账户，直接登录
            </button>
            <button class="modal-btn secondary" @click="goToRegister">
              我是新用户，立即注册
            </button>
          </div>
          
          <div class="modal-close">
            <button class="close-text-btn" @click="showAuthModal = false">稍后再说</button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()
const showAuthModal = ref(false)
const searchQuery = ref('Python')

const isLoggedIn = computed(() => authStore.isLoggedIn)

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push(`/courses?keyword=${encodeURIComponent(searchQuery.value)}`)
  }
}

// 跳转到分类
const goToCategory = (category: string) => {
  router.push(`/courses?category=${category}`)
}

// 跳转到登录页面
const goToLogin = () => {
  showAuthModal.value = false
  router.push('/login')
}

// 跳转到注册页面
const goToRegister = () => {
  showAuthModal.value = false
  router.push('/register')
}

onMounted(async () => {
  // 初始化认证状态
  authStore.initAuth()
  
  // 等待状态初始化完成
  await nextTick()
  
  // 设置默认搜索词为Java
  searchQuery.value = 'Java'
  
  // 如果已登录，重定向到课程页面
  if (authStore.isLoggedIn) {
    setTimeout(() => {
    router.replace('/courses')
    }, 1500)
  } else {
    // 新用户首次访问，5秒后自动显示登录提示弹窗
    setTimeout(() => {
      if (!authStore.isLoggedIn) {
        showAuthModal.value = true
      }
    }, 5000)
  }
})
</script>

<style scoped>
/* 完全按照My MOOC的样式 */
.my-mooc-home {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero区域 - 完全按照My MOOC */
.hero-section {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(74, 144, 226, 0.9)),
              url('');
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(74, 144, 226, 0.85);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: white;
}

.hero-title {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 40px;
  color: white;
}

/* Hero搜索框 - 完全按照My MOOC */
.hero-search {
  max-width: 600px;
  margin: 0 auto 30px;
}

.search-container {
  position: relative;
  margin-bottom: 12px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 4px;
  height: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-icon {
  position: absolute;
  left: 16px;
  color: #999;
  z-index: 1;
}

.hero-search-input {
  flex: 1;
  padding: 0 16px 0 50px;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
  color: #333;
  height: 100%;
}

.hero-search-input::placeholder {
  color: #999;
}

.hero-search-btn {
  background: #4dc0b5;
  color: white;
  border: none;
  padding: 0 24px;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.2s;
}

.hero-search-btn:hover {
  background: #45a69b;
}

.search-suggestion {
  color: white;
  font-size: 14px;
  opacity: 0.9;
}

.search-suggestion a {
  color: white;
  text-decoration: underline;
}

/* CTA按钮 */
.hero-cta {
  margin-top: 20px;
}

.cta-btn {
  background: #4dc0b5;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cta-btn:hover {
  background: #45a69b;
}

/* 分类区域 - 完全按照My MOOC */
.categories-section {
  padding: 80px 0;
  background: white;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 36px;
  font-weight: 400;
  color: #333;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 20px;
  margin-bottom: 60px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.category-item:hover {
  transform: translateY(-4px);
}

.category-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  transition: all 0.2s;
}

.category-icon svg {
  color: #666;
  stroke-width: 1.5;
}

.category-item:hover .category-icon {
  background: #4A90E2;
  border-color: #4A90E2;
}

.category-item:hover .category-icon svg {
  color: white;
}

.category-name {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  line-height: 1.4;
}

.view-all-categories {
  text-align: center;
}

.view-all-btn {
  background: #4dc0b5;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.view-all-btn:hover {
  background: #45a69b;
}

/* 功能特色区域 */
.features-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.feature-card {
  text-align: center;
  padding: 40px 20px;
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #4A90E2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.feature-icon svg {
  color: white;
}

.feature-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.feature-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* 精选课程区域 */
.featured-courses {
  padding: 80px 0;
  background: white;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.course-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.course-image {
  height: 140px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-image.java {
  background: linear-gradient(135deg, #f89820 0%, #db7093 100%);
}

.course-image.python {
  background: linear-gradient(135deg, #3776ab 0%, #ffd343 100%);
}

.course-image.frontend {
  background: linear-gradient(135deg, #61dafb 0%, #21209c 100%);
}

.course-image.algorithms {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}

.course-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #4A90E2;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.course-provider {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
}

.course-content {
  padding: 20px;
}

.course-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
  height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #e0e0e0;
  font-size: 12px;
}

.star.filled {
  color: #ffc107;
}

.rating-text {
  font-size: 12px;
  color: #666;
}

.course-meta {
  font-size: 12px;
  color: #666;
}

/* 加载状态 */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.loading-spinner {
  margin-bottom: 24px;
}

.spinner {
  color: #4A90E2;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 18px;
  color: #666;
}

/* 弹窗样式 */
.auth-modal {
  text-align: center;
  padding: 24px;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-icon {
  width: 80px;
  height: 80px;
  background: #4A90E2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.modal-icon svg {
  color: white;
}

.auth-modal h3 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.auth-modal p {
  color: #666;
  margin-bottom: 32px;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.modal-btn {
  width: 100%;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.modal-btn.primary {
  background: #4A90E2;
  color: white;
}

.modal-btn.primary:hover {
  background: #357ABD;
}

.modal-btn.secondary {
  background: #f8f9fa;
  color: #333;
  border-color: #dee2e6;
}

.modal-btn.secondary:hover {
  background: #e9ecef;
}

.close-text-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 8px;
}

.close-text-btn:hover {
  color: #4A90E2;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
  
  .section-title {
    font-size: 28px;
  }
}
</style>